@extends('wx.layout.default')

@section('wx.content')

  @if (!isset($activity))
    <header class='demos-header'>
      <h1 class="demos-title">暂无活动报名</h1>
    </header>
    <div class="weui-btn-area">
      <button class="weui-btn weui-btn_primary btnOk">确定</button>
    </div>
  @else
    <header class='demos-header'>
      <h1 class="demos-title">活动报名</h1>
    </header>

    <div class="weui-panel">
      <div class="weui-panel__bd">
        <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
          <div class="weui-media-box__bd">
            <div class="weui-media-box weui-media-box_text">
              <h4 class="weui-media-box__title">{{$activity->subject}}</h4>
              <p class="weui-media-box__desc">{{$activity->desc}}</p>
            </div>
          </div>
        </a>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <p>时间</p>
        </div>
        <div class="weui-cell__ft">{!! $activity->present()->showtime !!}</div>
      </div>
    </div>

    <form class="form-horizontal" id="wxsign" autocomplete="off">
      {{ csrf_field() }}
      <input type="hidden" name="aid" value="{{$activity->id}}"/>
      <input type="hidden" name="uid" value="{{$user->id}}"/>
      <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
          <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
          <div class="weui-cell__bd">
            {{$user->name}}
          </div>
        </div>
        @if( !$user->applied)
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">手机号码</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" name="mobile" type="tel" placeholder="请输入注册的手机号码" maxlength="11">
            </div>
          </div>
          <div class="weui-cell weui-cell_vcode">
            <div class="weui-cell__hd">
              <label class="weui-label">验证码</label>
            </div>
            <div class="weui-cell__bd">
              <input class="weui-input" name="vcode" type="tel" placeholder="请输入验证码" maxlength="6">
            </div>
            <div class="weui-cell__ft">
              <button class="weui-vcode-btn">获取验证码</button>
            </div>
          </div>
          <div class="weui-btn-area">
            <button class="weui-btn weui-btn_primary" id="btnSign" href="javascript:">确定</button>
          </div>
        @endif
      </div>


      @if($user->applied)
        <div class="weui-msg">
          <div class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></div>
          <div class="weui-msg__text-area">
            <h2 class="weui-msg__title">报名成功</h2>
            <p class="weui-msg__desc">请按照活动公布的时间和地点准时参加。</p>
          </div>
        </div>
        <div class="weui-btn-area">
          <a class="weui-btn weui-btn_primary" href="{{route('wx.index')}}">确定</a>
        </div>
      @endif

    </form>
  @endif
@stop


@section('javascript')
  <script src="//cdn.bootcss.com/jquery-validate/1.19.1/jquery.validate.min.js"></script>
  <script src="{{URL::asset('/assets/js/jquery-validate-methods.js')}}"></script>
  <script src="//cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script type="text/javascript">
      $(function () {

          $("#wxsign").validate({

              onfocusout: false,
              onkeyup: false,

              rules: {
                  mobile: {required: true, isMobile: true},
              },
              messages: {
                  mobile: {required: "请填写手机号码"}
              },

              showErrors: function (errorMap, errorList) {
                  $.each(errorList, function (i, v) {
                      layer.tips(v.message, v.element, {tips: 3, time: 2000});
                      return false;
                  });
              },

              submitHandler: function (form) {
                  $.post('{{route('wx.apply')}}', {
                      '_token': $("input[name='_token']").attr('value'),
                      'mobile': $("input[name='mobile']").val(),
                      'uid': $("input[name='uid']").val(),
                      'aid': $("input[name='aid']").val()
                  }, function (data) {
                      console.log(data);
                      layer.msg(data.message, {shift: -1}, function () {
                          if (data.status === true && data.url != null) {
                              $(window).attr('location', data.url);
                          }
                      });

                  }, 'json').error(function (data) {
                      layer.msg(data.responseJSON.message);
                  });
              }

          });

      });
  </script>
@stop